<html class="uk-height-1-1">
<head>
    <link rel="stylesheet" href="./uikit/uikit-2.25.0/css/uikit.min.css" />
    <script src="./jquery/jquery-3.1.1.min.js"></script>
    <script src="./uikit/uikit-2.25.0/js/uikit.min.js"></script>
    <script src="./vue/2.0/vue.min.js"></script>
</head>
<!-- .uk-height-1-1 这个辅助类用来赋予 100% 的高度, 都用到 html 和 body 上了 -->
<!-- .uk-vertical-align	垂直对齐, 向父容器添加这个类, 这个容器需要被设定一个高度 -->
<!-- .uk-vertical-align-middle 垂直对齐, 向子元素添加这个类，使内容居中对齐 -->
<!-- .uk-panel 为<div>元素添加这个类, 定义面板组件 -->
<!-- .uk-panel-box 类来创建一个可见的面板框, 这是默认的面板修饰样式, 但是不加这个类就是没阴影效果 -->
<!-- .uk-form-large 或 .uk-form-small 类到 <input>, <select> 或 <textarea> 元素中使之变大或变小 -->
<!-- .uk-button-primary 着重强调在一系列按钮中的重要性, 蓝色按钮 -->
<body class="uk-height-1-1">
    <div class="uk-vertical-align uk-text-center uk-height-1-1">
        <div class="uk-vertical-align-middle" style="width: 320px">
            <p><a href="/"><i class="uk-icon-button uk-icon-html5"></i></a> <a href="/">Awesome Python Webapp</a></p>
            <form id="vm" v-on="submit: submit" class="uk-panel uk-panel-box uk-form">  <!-- 这里的 form 放 pane 里了 -->
                <div class="uk-alert uk-alert-danger uk-hidden"></div>
                <div class="uk-form-row">
                    <div class="uk-form-icon uk-width-1-1">
                        <i class="uk-icon-envelope-o"></i>
                        <input v-model="email" name="email" type="text" placeholder="电子邮件" maxlength="50" class="uk-width-1-1 uk-form-large">
                    </div>
                </div>
                <div class="uk-form-row">
                    <div class="uk-form-icon uk-width-1-1">
                        <i class="uk-icon-lock"></i>
                        <input v-model="passwd" name="passwd" type="password" placeholder="口令" maxlength="50" class="uk-width-1-1 uk-form-large">
                    </div>
                </div>
                <div class="uk-form-row">
                    <button type="submit" class="uk-width-1-1 uk-button uk-button-primary uk-button-large"><i class="uk-icon-sign-in"></i> 登录</button>
                </div>
            </form>
        </div>
    </div>
    <script>
        $(function() {
            var vmAuth = new Vue({
                // el: '#vm',  // 和注册页面一样, 使用 Vue 后就不能显示, 这里的 Vue 也就随便看看吧
                data: {
                    email: '',
                    passwd: ''
                },
                methods: {
                    submit: function(event) {
                        event.preventDefault();
                        var
                            $form = $('#vm'),
                            email = this.email.trim().toLowerCase(),
                            data = {
                                email: email,
                                passwd: this.passwd === '' ? '' : CryptoJS.SHA1(email + ':' + this.passwd).toString()
                            };
                        $form.postJSON('/api/authenticate', data, function(err, result) {
                            if (!err) {
                                location.assign('/');
                            }
                        });
                    }
                }
            });
        });
    </script>
</body>
</html>
